<script setup>
import PositionCard from './PositionCard.vue'
import { ref } from 'vue'

const activeName = ref('first')

const handleClick = (tab, event) => {
  console.log(tab, event)
}
</script>
<template>
  <section class="section bg-gray">
    <div class="container">
      <header class="header text-center">热招职位</header>

      <main class="position-main">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="销售" name="first">
            <position-card></position-card>
          </el-tab-pane>

          <el-tab-pane label="客服/运营" name="second"
            ><position-card></position-card
          ></el-tab-pane>

          <el-tab-pane label="供应链/物流" name="third"
            ><position-card></position-card
          ></el-tab-pane>

          <el-tab-pane label="生产制造" name="fourth"
            ><position-card></position-card
          ></el-tab-pane>

          <el-tab-pane label="咨询/翻译/法律" name="fifth"
            ><position-card></position-card
          ></el-tab-pane>

          <el-tab-pane label="传媒" name="sixth"
            ><position-card></position-card
          ></el-tab-pane>

          <el-tab-pane label="人力/财务/行政" name="seventh"
            ><position-card></position-card
          ></el-tab-pane>

          <el-tab-pane label="服务业" name="eighth"
            ><position-card></position-card
          ></el-tab-pane>

          <el-tab-pane label="市场/公关/广告" name="nineth"
            ><position-card></position-card
          ></el-tab-pane>
        </el-tabs>

        <p class="buttom-box">
          <el-button type="primary" plain>查看更多</el-button>
        </p>
      </main>
    </div>
  </section>
</template>
<style lang="scss" scoped>
.header {
  font-size: 32px;
  font-weight: 600;
  color: #222;
  line-height: 45px;
  margin-bottom: 12px;
}

.position-main {
  margin: 12px 0;
  :deep() {
    .el-tabs__item {
      font-size: 16px;
      color: #666;
      padding: 0 24px;
    }

    .el-tabs__item.is-active {
      color: #409eff;
    }
  }

  .buttom-box {
    text-align: center;
    margin-top: 12px;
  }

  .el-button {
    width: 184px;
    height: 40px;
  }
}
</style>
